import styles from './index.less'
import Swiper from '@/components/swiper'
import React, { useEffect, useState, useRef } from 'react'
import moment from 'moment'
import { radioes, recommendpersonalize, radioesforpay, variousradios } from '@/api'
import img_radiolists from '@/assets/img/radiolists.png'
import { Link } from "umi"
import IconFont from "@/components/iconfont";
import MyImg from '@/components/myimg'
const Radiostation: React.FC = () => {
  const [radios, setRadios] = useState([]);
  const RadiosEl = useRef<any>(null);
  const [radioesForpay, setRadioesForpay] = useState([]);
  const [recommendPersonalize, setRecommendPersonalize] = useState([]);
  const [variousRadios, setvariousRadios] = useState<any[]>([]);
  useEffect(() => {
    radioesforpay({ limit: 4 }).then((res) => {
      setRadioesForpay(res.data.list);
      // console.log('setRadioesForpay',res.data.list)
    });
    radioes().then((res) => {
      setRadios(res.categories);
      // console.log('setRadios',res.categories)
    });
    recommendpersonalize({ limit: 6 }).then((res) => {
      setRecommendPersonalize(res.data);
      // console.log('resetRecommendPersonalizes.data',res.data)
    });
    Promise.all([
      //创作翻唱 电台
      variousradios({ cateId: 2001, limit: 5 }),
      //声之剧场 电台
      variousradios({ cateId: 10001, limit: 5 }),
      //音乐故事 电台
      variousradios({ cateId: 2, limit: 5 }),
      //情感调频 电台
      variousradios({ cateId: 3, limit: 5 }),
      //声音恋人 电台
      variousradios({ cateId: 3001, limit: 5 }),
    ]).then((res) => {
      // console.log('setvariousRadios',res);
      setvariousRadios(res);
    });
    /* variousradios({cateId:2001,limit:1}).then(res=>{
      setRadioesCreate(res.djRadios)
    }) */
  }, []);
  const [btnRight, setBtnRight] = useState(false);

  const showBtn = () => {
    console.log(RadiosEl.current.style);
    RadiosEl.current.style = `transform: translate(${btnRight ? 0 : -720
      }px,0);width:${90 * radios.length + 180}px;`;
    setBtnRight(!btnRight);
  };
  return (
    <div className={styles["allpage"]}>
      <Swiper />
      <div className={styles["middlepage"]}>
        <button
          className={styles["btn-radios"]}
          style={{ display: btnRight ? "block" : "none", zIndex: 20 }}
          onClick={showBtn}
        >
          <IconFont type='iconjiantou1' />
        </button>
        <div
          className={styles["radios-box"]}
          style={{ width: 90 * radios.length + 180 + "px" }}
          ref={RadiosEl}
        >
          <div
            className={styles["radios"]}
            style={{ marginLeft: "25px" }}
          >
            <div className={styles["divofimg"]}>
              <img
                src={img_radiolists}
                className={styles["imgradiolist"]}
              />
            </div>
            <p className={styles["text"]}>排行榜</p>
          </div>
          {radios.map((item: any) => (
            <div
             key={`radiosid${item?.id}`}
             className={styles["radios"]}
             >
              <div className={styles["divofimg"]}>
                <MyImg
                  src={item.pic56x56Url}
                  imgSize={{ width: 50 }} />
              </div>
              <p className={styles["text"]}>{item.name}</p>
            </div>
          ))}
          <div className={styles["radios"]}>
            <div
              className={styles["divofimg"]}
              >
                <div style={{borderRadius:"100%",backgroundColor:'#fff'}}>

                </div>
            </div>
            <p className={styles["text"]} style={{ width: "60px" }}>
              我要做主播
            </p>
          </div>
        </div>
        <button
          className={styles["btn-radios"]}
          style={{ right: "0px", display: !btnRight ? "block" : "none" }}
          onClick={showBtn}
        >
          <IconFont type='iconjiantou' />
        </button>
      </div>
      <div className={styles["bottempage"]}>
        <div className={styles["typeOfanchors"]} style={{ height: "320px" }}>
          <div className={styles["specise"]}>
            <a >付费精品</a>
          </div>
          {radioesForpay.map((item: any) => (
            <div
            key={`radioesForpay${item?.id}`}  
            className={styles['anchors-pay']}
            >
              {
                /*href={'https://music.163.com/#/djradio?id=' + item.id}*/
              }
              <span>{moment().format('YYYY年M月D日')}更新</span>
              <MyImg src={item.picUrl} imgSize={{width:130}}/>
              <div>
                <a>{item.name}</a>
                <p>{item.rcmdText}</p>
                <p>{item.lastProgramName}</p>
                <h1>￥{item.originalPrice / 100}</h1>
              </div>
            </div>
          ))}
        </div>
        <div className={styles["typeOfanchors"]}>
          <div className={styles["specise"]}>
            <a>电台个性推荐</a>
          </div>
          {recommendPersonalize.map((item: any) => (
            <div 
            className={styles["anchors"]}
            key={`recommendPersonalize${item?.id}`}
            >
              <MyImg src={item.picUrl} imgSize={{width:112}}/>
              <p>{item.rcmdText}</p>
              <span>{item.name}</span>
            </div>
          ))}
        </div>
        {variousRadios.map((item: any,index:number) => (
          <div 
          className={styles["typeOfanchors"]}
          key={`variousRadios-index${index}`}
          >
            <div className={styles["specise"]}>
              <a>{item.djRadios[0].category}</a>
            </div>
            {item.djRadios.slice(0, 6).map((itemIn: any) => (
              <div 
              className={styles["anchors"]}
              key={`item.djRadios${itemIn.id}`}
              >
              <MyImg src={itemIn.picUrl} imgSize={{width:112}}/>
                <p>{itemIn.rcmdtext}</p>
                <span>{itemIn.name}</span>
                {itemIn.category === "声之剧场" && (
                  <h1 className={styles["h1-lt"]}>付费精品</h1>
                )}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};
export default Radiostation;